<template>
	<view>
		<view class="pc-nav-bar">
			<view class="nav-content">
				<view class="logo-view">
					<image src="@/static/pc/logo-icon.png" class="logo-image"></image>
				</view>
				<view class="menu-view">
					<view class="user-view">
						<view class="sign-in">
							<image src="/static/pc/sign-in-icon.png" class="sign-in-icon"></image>
							<view>签到</view>
						</view>
						<el-popover popper-class="user-popover-css" placement="bottom-end" :width="436" trigger="click">
							<UserInfoCmp></UserInfoCmp>
							<view slot="reference" class="user-content">
								<image src="/static/pc/user-icon.png" class="user-icon"></image>
								<view>尊敬的张玉</view>
								<i class="el-icon-caret-bottom"></i>
							</view>
						</el-popover>
					</view>
					<view class="menu-content">
						<view v-for="(item,index) in menuList" :key="index" class="menu-item"
							:class="{'menu-active': item.page.includes($route.path)}" @click="onNavEvent(item)">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 111px;"></view>
	</view>
</template>

<script>
	import UserInfoCmp from './UserInfoCmp.vue'
	export default {
		components: {
			UserInfoCmp
		},
		name: "PcNavBar",
		data() {
			return {
				menuList: [{
						name: '首页',
						default: '/pages/index/index',
						page: ['/', '/pages/index/index']
					},
					{
						name: '项目展示',
						default: '/pages/project/project',
						page: ['/pages/project/project', '/pages/projectDetail/projectDetail']
					},
					{
						name: '关于我们',
						default: '/pagesHome/homeAbout/homeAbout',
						page: ['/pagesHome/homeAbout/homeAbout']
					},
					{
						name: 'VR展示',
						default: '/pagesHome/VRPage/VRPage',
						page: ['/pagesHome/VRPage/VRPage']
					},
					{
						name: '诺众微课堂',
						default: '/pagesHome/classroomList/classroomList',
						page: ['/pagesHome/classroomList/classroomList']
					},
					// {
					// 	name: '万小宝',
					// 	default: '/pages/index/index',
					// 	page: ['/pages/index/index']
					// },
					{
						name: '个人中心',
						default: '/pages/mine/mine',
						page: ['/pages/mine/mine', '/pagesMine/project/project']
					}
				]
			};
		},
		beforeMount() {
			console.log(this.$route)
			console.log(this.$router)
		},
		methods: {
			onNavEvent(item) {
				this.$router.push(item.default)
			}
		}
	}
</script>
<style scoped lang="scss">
	.pc-nav-bar {
		width: 100%;
		height: 111px;
		background: #FFFFFF;
		@extend .column;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 20;

		.nav-content {
			width: 1200px;
			height: 100%;
			@extend .row-between;

			.logo-view {
				width: 214px;
				height: 100%;

				padding-top: 43px;

				.logo-image {
					width: 100%;
					height: 42px;
				}
			}

			.menu-view {
				height: 100%;
				@extend .column;
				justify-content: center;
				align-items: flex-end;

				.popover-css {}

				.user-view {
					@extend .row;

					.sign-in {
						@extend .row;
						font-size: 14px;
						color: #1F0C00;

						.sign-in-icon {
							width: 18px;
							height: 18px;
							margin-right: 8px;
						}
					}

					.user-content {
						@extend .row;
						font-size: 14px;
						color: #1F0C00;
						margin-left: 49px;

						.user-icon {
							width: 18px;
							height: 18px;
							margin-right: 8px;
						}
					}
				}

				.menu-content {
					@extend .row;
					margin-top: 21px;

					.menu-item {
						font-weight: 400;
						font-size: 17px;
						color: #1F0C00;
					}

					.menu-active {
						color: #781C18;
					}

					.menu-item+.menu-item {
						margin-left: 45px;
					}
				}
			}

		}

	}
</style>